<script lang="ts">
	import { ref,defineComponent, onMounted, onUnmounted, reactive } from 'vue';

	export default defineComponent({
		name: 'use-tabbar',
		props: {
			tabbarIndex: String
		},
		setup(props) {
			const isVisible = ref(false);
			const { tabbarIndex } = props;
		
			const list = reactive([{
				label: "首页",
				path: "/pages/tabbar/index",
				icon: "/static/icons/index.png",
				selectedIcon: "/static/icons/index-active.png",
			},
			{
				label: "日历",
				path: "/pages/tabbar/calendar",
				icon: "/static/icons/calendar.png",
				selectedIcon: "/static/icons/calendar-active.png",

			}, 
			{
				label: "我的",
				path: "/pages/tabbar/mine",
				icon: "/static/icons/mine.png",
				selectedIcon: "/static/icons/mine-active.png",
			},
			]);
			onMounted(() => {
				console.log("加载");
				 isVisible.value = !isVisible.value;
			})
			onUnmounted(()=>{
				// isVisible.value = !isVisible.value;
			})
			const changeTabBar = (index : number) => {
				console.log("changeTabBar", index, list[index].path);

				// getApp().globalData.tabbarIndex = index; //切换菜单时修改全局变量tabbarIndex
				uni.switchTab({
					url: list[index].path,
				});
			}


			const beforeEnter = (el : HTMLElement) => {
				// 初始化元素的样式
				el.style.opacity = '0';
			};

			const enter = (el : HTMLElement, done : () => void) => {
				// 执行进入时的动画
				let opacity = 0;
				const timer = setInterval(() => {
					opacity += 0.1;
					el.style.opacity = opacity.toString();
					if (opacity >= 1) {
						clearInterval(timer);
						done();
					}
				}, 50);
			};

			const afterEnter = (el : HTMLElement) => {
				// 进入后的钩子
			};

			const beforeLeave = (el : HTMLElement) => {
				// 离开前的钩子
			};

			const leave = (el : HTMLElement, done : () => void) => {
				// 执行离开时的动画
				let opacity = 1;
				const timer = setInterval(() => {
					opacity -= 0.1;
					el.style.opacity = opacity.toString();
					if (opacity <= 0) {
						clearInterval(timer);
						done();
					}
				}, 50);
			};

			const afterLeave = (el : HTMLElement) => {
				// 离开后的钩子
			};
			return {
				tabbarIndex,
				list, changeTabBar,
				isVisible,
				beforeEnter,
				enter,
				afterEnter,
				beforeLeave,
				leave,
				afterLeave,
			};
		}
	});
</script>

<template>
	<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
		@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
		<cover-view class="tabBarRow"  v-if="isVisible">
			<cover-view v-for="(item, index) in list" :key="index" class="tabBarCell"
				:class="['tabBarItem', index == tabbarIndex ? 'selctedIcon' : 'icon']" @click="changeTabBar(index)">
				<cover-image :src="index == tabbarIndex ? item.selectedIcon : item.icon"></cover-image>
			</cover-view>
		</cover-view>
	</transition>
</template>

<style lang="scss" scoped>
	.tabBarRow {
		flex-direction: row;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		align-items: center;
		justify-items: center;
		width: 100%;
		height: 104rpx;
		position: fixed;
		bottom: 0;
		z-index: 999;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		/* padding-bottom: 40rpx */
		display: flex;
		justify-content: space-around;
		backdrop-filter: blur(3px);
		background-color: rgba(255, 255, 255, 0.35);
	}

	.tabBarItem {
		height: 90rpx;
		width: 90rpx;
		position: relative;
		top: -5rpx;
	}

	.selctedIcon {
		height: 86rpx;
		width: 86rpx;
	}

	.icon {
		height: 86rpx;
		width: 86rpx;
	}

	.tabBarItem image {
		height: 100%;
		width: 100%;
	}
	
	/* 定义过渡的类名 */
	.fade-enter-active, .fade-leave-active {
	  transition: opacity 1s;
	}
	.fade-enter-from, .fade-leave-to {
	  opacity: 0;
	}
</style>